<template>
	<div class="light">
		<el-row>
			<el-col :span="2">
				白
			</el-col>
			<el-col :span="4">
				<div class="lgt" v-bind:class="colors[1]" @click="adjustLight('1')" title="点击调为白色等级（注：只能在原有基础上调高，不能降级）">
					<i v-show="light.manualLight == 1" class="iconfont icon-shou"></i>
				</div>
			</el-col>
			<el-col :span="2">
				绿
			</el-col>
			<el-col :span="4">
				<div class="lgt" v-bind:class="colors[2]" @click="adjustLight('2')" title="点击调为绿色等级（注：只能在原有基础上调高，不能降级）">
					<i v-show="light.manualLight == 2" class="iconfont icon-shou"></i>
				</div>
			</el-col>
			<el-col :span="2">
				黄
			</el-col>
			<el-col :span="4">
				<div class="lgt" v-bind:class="colors[3]" @click="adjustLight('3')" title="点击调为黄色等级（注：只能在原有基础上调高，不能降级）">
					<i v-show="light.manualLight == 3" class="iconfont icon-shou"></i>
				</div>
			</el-col>
			<el-col :span="2">
				红
			</el-col>
			<el-col :span="4">
				<div class="lgt" v-bind:class="colors[4]" @click="adjustLight('4')" title="点击调为红色等级（注：只能在原有基础上调高，不能降级）">
					<i v-show="light.manualLight == 4" class="iconfont icon-shou"></i>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script type="text/javascript">
	export default{
		name: "Light",
		data(){
			return {
				curLight:1,
				shanFlag:1,
				colors:['white','white','white','white','white'],
				lights:[
				['white','white','white','white','white'],
				['white','white','white','white','white'],
				['white','white','green','white','white'],
				['white','white','white','yellow','white'],
				['white','white','white','white','red']]
			}
		},
		computed:{
			light:{
				set(value){
				},
				get(){
					return this.$store.state.light;
				}
			}
		},
		created(){
			var vm = this;
			setInterval(function(){
				if (vm.shanFlag % 3 == 0 ) {
					vm.colors = vm.lights[1];
					vm.shanFlag = 1;
				}else{
					vm.colors = vm.lights[vm.curLight];
					vm.shanFlag = vm.shanFlag + 1;
				}
			},300)
		},
		methods:{
			adjustLight:function(lightRank){
				this.light.manualLight = lightRank;
			}
		},
		watch:{
			light:{
				handler(curVal,oldVal){
					var allLight = curVal.manualLight+" "+curVal.diseaseLight+" "+curVal.lifeLight+" "+curVal.symptomLight;
					if (allLight.indexOf("4")!=-1) {
						this.curLight = 4;
					}else if (allLight.indexOf("3")!=-1) {
						this.curLight = 3;
					}else if (allLight.indexOf("2")!=-1) {
						this.curLight = 2;
					}else{
						this.curLight = 1;
					}
					this.colors = this.lights[this.curLight]; 
					if (this.curLight!=oldVal.curLight) {
						this.light.curLight = this.curLight;
					}
				},
				deep: true
			}
		}
	}
</script>
<style type="text/css">
	.light{
		width: 250px;
		height: 30px;
		line-height: 30px;
	}
	.lgt{
		border: 1px solid #000000;
		text-align: center;
		height: 28px;
		width: 35px;
		border-radius: 10px;
		cursor: pointer;
	}
	.white{
		background-color: white;
		border-color: #cccccc;
	}
	.green{
		background-color: green;
		border-color: green;
	}
	.yellow{
		background-color: yellow;
		border-color: yellow;
	}
	.red{
		background-color: red;
		border-color: red;
	}
</style>